  <template>
    <div class="parent">
      <el-card class="div1">
        <template #header>
          <div class="card-header">
            <span>基地概况</span>
          </div>
        </template>
        <div class="card-body"><BaseOverview /></div>
      </el-card>

      <el-card class="div2">
        <template #header>
          <div class="card-header">
            <span>设备统计</span>
            <el-button class="button" type="primary" link @click="goToPage('/devices/list')">更多设备</el-button>
          </div>
        </template>
        <div class="card-body"><PieChats /></div>
      </el-card>

      <el-card class="div3">
        <template #header>
          <div class="card-header">
            <span>设备定时任务</span>
          </div>
        </template>
        <div class="card-body"><PlantChart /></div>
      </el-card>

      <el-card class="div4">
        <template #header>
          <div class="card-header">
            <span>溯源统计</span>
            <el-button class="button" type="primary" link @click="goToPage('/traceability/reports')">更多溯源</el-button>
          </div>
        </template>
        <div class="card-body"><TraceabilityChart /></div>
      </el-card>

      <el-card class="div5">
        <template #header>
          <div class="card-header">
            <span>农事统计</span>
            <el-button class="button" type="primary" link @click="goToPage('/farm/fields')">更多农事</el-button>
          </div>
        </template>
        <div class="card-body"><FarmChart /></div>
      </el-card>

      <el-card class="div6">
        <template #header>
          <div class="card-header">
            <span>基地概览</span>
          </div>
        </template>
        <div class="card-body">
          <MapContainer />
<!--          <ThreeDModel />-->
        </div>
      </el-card>

      <el-card class="div7">
        <template #header>
          <div class="card-header">
            <span>历史数据</span>
            <el-button class="button" type="primary" link @click="goToPage('/devices/dashboard')">更多数据</el-button>
          </div>
        </template>
        <div class="card-body">
          <HistoryData />
        </div>
      </el-card>
    </div>
  </template>

  <script setup lang="ts">
  import { useRouter } from 'vue-router';
  import BaseOverview from "@/views/Home/BaseOverview.vue";
  import PieChats from "@/views/Home/DeviceChart.vue";
  import PlantChart from "@/views/Home/PlantChart.vue";
  import FarmChart from "@/views/Home/FarmChart.vue";
  import TraceabilityChart from "@/views/Home/TraceabilityChart.vue";
  import MapContainer from "@/views/Home/MapContainer.vue";
  import ThreeDModel from "@/views/ThreeDModel.vue";
  import HistoryData from "@/views/Home/HistoryData.vue";

  // 创建 Vue Router 实例
  const router = useRouter();

  // 通用跳转方法
  const goToPage = (path: string) => {
    router.push(path);
  };
  </script>

  <style scoped>
  /* 父容器的网格布局 */
  .parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 修改为4列 */
    grid-template-rows: repeat(3, 1fr);   
    gap: 5px;
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
  }

  /* ElCard 组件头部样式 */
  .el-card ::v-deep .el-card__header {
    padding: 0 10px;
    font-weight: bolder;
    height: 28px;
    line-height: 28px;
  }

  /* ElCard 组件主体样式 */
  .el-card ::v-deep .el-card__body {
    padding: 2px;
    height: calc(100% - 20px);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .card-body  {
    height: 100%;
    width: 100%;
  }

  /* 每个卡片的默认高度 */
  .div1,
  .div2,
  .div3,
  .div4,
  .div5,
  .div7 {
    transition: none;
    height: 100%;
  }

  /* 修改基地概览的位置和大小 */
  .div6 {
    transition: none;
    grid-area: 1 / 2 / 3 / 4; /* 占据第1-2行和第2-3列 */
    height: 100%;
  }

  /* 添加区域历史数据的位置和大小 */
  .div7 {
    transition: none;
    grid-area: 3 / 2 / 4 / 5; /* 修改为占据第3行和第2-4列 */
    height: 100%;
  }

  /* 小屏幕适配 */
  @media (max-width: 1280px) {
    .parent {
      display: flex;
      flex-direction: column;
      gap: 10px;
      height: auto;
    }

    .div1, .div2, .div3, .div4, .div5, .div6, .div7 {
      width: 100%;
      height: 30vh;
    }
  }
  </style>
